<template>
  <div class="UserComment_container">
    <div class="UserComment_content">
      <div class="UserComment_title">用户评论</div>
      <div class="UserComment_img_info_list">
        <div
          class="UserComment_img_info_list_warp"
          :class="{
            UserComment_img_info_list_warp_height: !isShow,
          }"
        >
          <div
            class="UserComment_img_info flex"
            v-for="item in newComments"
            :key="item.id"
          >
            <img
              :src="baseurl + item?.smallHeader"
              alt=""
              class="UserComment_info_img"
            />
            <div class="UserComment_info flex_c">
              <div class="UserComment_info_name">{{ item.nickname }}</div>
              <div class="UserComment_info_text">
                <!-- {{ item.content }} -->
                <div v-html="item.content" class="UserComment_info_text_img"></div>
              </div>
              <div class="UserComment_info_time flex">
                <div>
                  <span class="reply">回复</span
                  ><span>{{ item.createdAt }}</span>
                </div>
                <div>
                  <span style="margin-right: 7px">{{ item.likes }}</span
                  ><van-icon name="good-job-o" size="15" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="UserComment_mask" v-show="isShow" @click="showOpen">
          <van-icon name="arrow-down" color="#FE7959" />
        </div>
        <div class="UserComment_unfold" v-if="comments.length > 2" @click="toLogin">
          查看更多评论
        </div>
      </div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter } from 'vue-router'
import type { AnyObject } from "@/types/newpeople";


const isShow = ref(true);
const $router=useRouter()
const showAll = ref(false);
const baseurl = "https://imagev2.xmcdn.com/";
let token = localStorage.getItem('xmtoken')

const props = defineProps<{
  comments: AnyObject[];
}>();

// 展开用户评论
const newComments = computed(() => {
  if (showAll.value === false) {
    // 判断数组长度是否大于1
    if (props.comments.length > 2) {
      // 截取前1条数据，返出去展示
      let newComments = props.comments.slice(0, 2);
      return newComments;
    } else {
      // 如果列表长度不够1条，直接展示原列表
      return props.comments;
    }
  } else {
    //这里showAll为true时，展示全部数据
    return props.comments;
  }
});

// 显示隐藏遮罩
const showOpen = () => {
  isShow;
  showAll.value = true;
  isShow.value = false;
};



const toLogin = () => {
  if (token) {

  } else {
    $router.push({ path: '/login' })
  }
}
</script>

<style lang="less" scoped>
.UserComment_info_text_img{
 ::v-deep img {
    width: 20px;
	  height:20px;
  }
}

.UserComment_container {
  width: 100%;
  margin-bottom: 10px;
  padding: 0 15px 15px 0;
  box-sizing: border-box;
  background-color: #fff;
  height: 100%;
  .UserComment_content {
    // height: 100px !important;

    .UserComment_title {
      font-size: 18px;
      margin-bottom: 20px;
      font-weight: bold;
      margin-left: 15px;
    }
    .UserComment_img_info_list {
      position: relative;
      .UserComment_img_info_list_warp {
        height: 200px;
        overflow: hidden;
      }
      .UserComment_img_info_list_warp_height {
        height: 100%;
        overflow: initial;
      }
      .UserComment_img_info {
        margin-bottom: 28px;
        margin-left: 15px;

        .UserComment_info_img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          margin-right: 15px;
        }
        .UserComment_info {
          width: 294px;
          justify-content: space-around;
          .UserComment_info_name {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
          }
          .UserComment_info_text {
            width: 290px;
            font-size: 14px;
            color: #333;
            line-height: 1.6em;
            margin-bottom: 10px;
            
          }
          .UserComment_info_time {
            width: 296px;
            font-size: 8px;
            color: #999;
            justify-content: space-between;
            box-sizing: border-box;
            .reply {
              color: #666;
              margin-right: 7px;
            }
          }
        }
      }
      .UserComment_mask {
        margin-bottom: 40px;
        position: absolute;
        padding-top: 112px;
        box-sizing: border-box;
        text-align: center;
        z-index: 10;
        height: 155px;
        width: 345px;
        bottom: -9px;
        right: 0px;
        background: linear-gradient(
          -180deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.8) 34%,
          rgba(255, 255, 255, 0.95) 66%,
          #fff 100%
        );
        // background-color: red;
      }
      .UserComment_unfold {
        z-index: 12px;
        font-size: 14px;
        color: #fe7959;
        width: 375px;
        text-align: center;
        height: 31px;
        padding-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
      }
    }
  }
}
</style>
